<template>
	<view class="home">
		<view class="swiper">
			<swiper circular :autoplay="true" class="swiper1">
				<swiper-item v-for="value in data.banner_list" :key="value">
					<img :src="$imgUrl+value">
				</swiper-item>
			</swiper>
			<swiper circular :autoplay="true" :vertical='true' class="swiper2">
				<swiper-item v-for="(value,index) in data.article" :key="index">
					<view class="item" @click="affiche(value.id)">
						<image src="../../static/home/26.png"></image>
						<i>公告</i>
						<span></span>
						<p>{{value.title}}</p>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="main">
			<view class="nav">
				<view v-for='value in data.category' @click='tab(value.id)' :class="{'view':index==value.id}">
					{{value.title}} <span></span>
				</view>
			</view>
			<view class="list">
				<view v-for='value in list' :key="value.id" @click="particulars(value.id)">
					<main>
						<p>{{value.tag}}</p>
						<image :src="$imgUrl+value.goods_image"></image>
					</main>
					<view>
						<view>
							<p>{{value.goods_name}}</p>
						</view>
						<p>{{value.intro}}</p>
						<view>
							<u-icon name="clock-fill" color="#52C276" size="10"></u-icon>
							<span>{{value.duration}}分钟</span>
							<view>
								<p>{{value.goods_price}}</p>
								<span>元{{value.unit?'/'+value.unit:''}}</span>
							</view>
						</view>
					</view>
					<footer>
						<p>超{{value.goods_virtual_sales}}人选择</p>
						<button @click.stop="skip('/pages/assistant/assistant?page=1&goods_id='+value.id)">选择技师</button>
					</footer>
				</view>
			</view>
		</view>
		<u-popup :show="show" mode="center">
			<view class="popup">
				<p><span>￥</span>{{jine}}</p>
				<button @click="close">立即领取</button>
				<image @click="close" src="../../static/home/7.png"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				falg: false,
				index: 0,
				page: 1,
				data: {},
				list: [],
				show: false,
				jine: 0
			};
		},
		onShow() {
			if (uni.getStorageSync('userToken')) {
				this.getCoupon();
			}
		},
		onLoad() {
			this.home();
		},
		// 触底刷新
		onReachBottom() {
			if (this.falg) {
				this.getGoodsList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.falg = true
			this.list = []
			this.getGoodsList()
			uni.stopPullDownRefresh();
		},
		methods: {
			affiche(id) {
				uni.navigateTo({
					url: '/pages/affiche/affiche?id=' + id
				});
			},
			tab(index) {
				if (this.index !== index) {
					this.index = index
					this.page = 1
					this.falg = true
					this.list = []
					this.getGoodsList()
				}
			},
			skip(url) {
				uni.navigateTo({
					url,
				})
			},
			particulars(id) {
				uni.setStorageSync('id', id)
				uni.navigateTo({
					url: '/pages/particulars/particulars?page=1&id=' + id
				});
			},
			getGoodsList() {
				this.$httpRequest('/goods/getGoodsList', {
					cid: this.index,
					page: this.page
				}).then(res => {
					if (res.data.last_page > res.data.current_page) {
						this.page++;
						this.falg = true
					} else {
						this.falg = false
					}
					this.list.push(...res.data.data)
				})
			},
			home() {
				this.$httpRequest('/index/index').then(res => {
					this.data = res.data
					this.index = res.data.category[0].id
					this.getGoodsList()
					uni.setStorageSync('cid', JSON.stringify(res.data.category))
					uni.setStorageSync('configInfo', JSON.stringify({
						logo: res.data.logo,
						site_title: res.data.site_title,
						withdraw_config: res.data.withdraw_config,
						app_id: res.data.wechat_app_id,
					}));
				})
			},
			// 关闭优惠卷弹窗
			close() {
				this.show = false
			},
			// 检查优惠卷
			getCoupon() {
				this.$httpRequest('/coupon/getCoupon').then(res => {
					if (res.data > 0) {
						this.jine = res.data
						this.show = true
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.home {
		max-width: 100vw;
		overflow: hidden;

		.popup {
			width: 592rpx;
			padding-top: 20rpx;
			height: 610rpx;
			background: url('../../static/home/36.png');
			background-size: 100% 100%;
			position: relative;

			&>P {
				font-size: 80px;
				color: #1F6F39;
				margin-top: 150rpx;
				text-align: center;
				transform: translateX(12rpx);

				&>span {
					font-size: 20px;
				}
			}

			&>button {
				margin: 90rpx auto 0;
				width: 340rpx;
				height: 100rpx;
				line-height: 100rpx;
				transform: translateX(14rpx);
				border-radius: 50rpx;
				color: #fff;
				background: #218943;
				font-size: 24px;
			}

			&>image {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				bottom: -120rpx;
				left: 50%;
				transform: translateX(-28rpx);
			}
		}

		&>.main {
			width: 100%;
			border-radius: 32rpx 32rpx 0 0;
			background-color: #F0F0F0;
			min-height: calc(100vh - 430rpx);
			transform: translateY(-22rpx);
			padding-bottom: 72rpx;
			box-sizing: border-box;

			&>.list {
				width: 690rpx;
				margin: 0 auto;

				&>view {
					width: 100%;
					height: 172rpx;
					background: #fff;
					padding: 10rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					border-radius: 10rpx;
					margin-bottom: 22rpx;

					&>main {
						position: relative;
						display: flex;

						&>p {
							position: absolute;
							top: 10rpx;
							left: 0;
							font-size: 10px;
							color: #fff;
							background: #52C276;
							border-radius: 0 14rpx 14rpx 0;
							padding: 2rpx 8rpx 2rpx 4rpx;
							z-index: 2;
						}

						&>image {
							width: 168rpx;
							height: 152rpx;
							border-radius: 8rpx;
							image-rendering: -moz-crisp-edges;
							image-rendering: -o-crisp-edges;
							image-rendering: -webkit-optimize-contrast;
							image-rendering: crisp-edges;
							-ms-interpolation-mode: nearest-neighbor;
						}
					}

					&>view {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						height: 100%;
						padding-left: 20rpx;
						position: relative;

						&>p {
							font-size: 8px;
							margin: 10rpx 0;
							color: #9E9E9E;
						}

						&>view {
							display: flex;
							align-items: center;

							&>p {
								width: 100%;
								font-size: 15px;
								margin-right: 10rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box !important;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
								font-weight: 200;
							}

							&>.u-icon {
								margin: 0;
								margin-right: 10rpx;
								transform: translateY(1rpx);
							}

							&>span {
								font-size: 12px;
								color: #9E9E9E;
							}

							&>view {
								color: #52C276;
								display: flex;
								align-items: flex-end;
								margin-left: 20rpx;

								&>p {
									font-size: 14px;
									line-height: 14px;
								}

								&>span {
									font-size: 10px;
									line-height: 13px;
								}
							}
						}
					}

					&>footer {
						font-size: 10px;
						color: #999999;

						&>button {
							width: 130rpx;
							height: 50rpx;
							line-height: 50rpx;
							background: #52C276;
							color: #fff;
							font-size: 12px;
							padding: 0;
						}
					}
				}
			}

			&>.nav {
				width: 100%;
				padding: 22rpx 60rpx 10rpx;
				display: flex;
				box-sizing: border-box;

				&>.view {
					color: #3B7933;
					font-weight: 600;

					&>span {
						background: #82E3A9;
						border-radius: 6rpx;
					}
				}

				&>view {
					flex: 1;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					font-size: 15px;
					color: #999999;

					&>span {
						width: 46rpx;
						height: 6rpx;
						background: #82E3A900;
						margin-top: 6rpx;
					}
				}
			}
		}

		&>.swiper {
			width: 100%;
			background: linear-gradient(180deg, #52C276 0%, #90EDB8 100%);
			padding: 30rpx 30rpx 30rpx;

			&>.swiper2 {
				width: calc(100% - 60rpx);
				height: 50rpx;
				border-radius: 10rpx;
				background: #A2FAC6;
				margin: 20rpx 0;

				.item {
					display: flex;
					align-items: center;
					height: 100%;

					&>image {
						width: 32rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}

					&>i {
						font-size: 15px;
						margin: 0 28rpx 0 12rpx;
					}

					&>span {
						width: 1px;
						height: 26rpx;
						background-color: #D8FFE8;
						margin-right: 14rpx;
					}

					&>p {
						width: 500rpx;
						font-size: 14px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box !important;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			}

			&>.swiper1 {
				width: calc(100% - 60rpx);
				height: 310rpx;
				border-radius: 10rpx;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>